<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Simple Example</title>
        <script src="http://www.google.com/jsapi?key=ABQIAAAAVbSXpJwQBNML8sJJyd7iWRRxxH9EYqqjuovpmRkmKSwQQHryGBSf3oJbxTL_wnqllLoZMUA-KuD9aA"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <!-- earth-api-utility-library dependencies -->
        <script src="http://geojs.googlecode.com/svn/trunk/dist/geo.pack.js"></script>
        <script src="http://earth-api-utility-library.googlecode.com/svn/trunk/extensions/dist/extensions.pack.js">
        </script>
        <!-- kmltree source files -->
        <link rel="stylesheet" href="http://kmltree.googlecode.com/hg/dist/kmltree.css" media="screen">
        <script src="http://kmltree.googlecode.com/hg/dist/kmltree.min.js"></script>
        
        <script>
            google.load("earth", "1");
            
            function init() {
                google.earth.createInstance('map3d', initCB, failureCB);
            }           
            
            function initCB(ge) {
                ge.getWindow().setVisibility(true);
                var gex = gex = new GEarthExtensions(ge);
                
                var layers = kmltree({
                    url: 'http://unchartable.googlecode.com/svn/trunk/misc/kmltree/includedLayers.kml',
                    gex: gex, 
                    element: $('#tree1'),
                    mapElement: $('#map3d'),
                    setExtent: true,
                    supportItemIcon: true,
                    restoreState: true
                });
                
                layers.load();

                var options = kmltree({
                    url: 'http://unchartable.googlecode.com/svn/trunk/misc/kmltree/displayOptions.kml',
                    gex: gex, 
                    element: $('#tree2'),
                    mapElement: $('#map3d'),
                    setExtent: true,
                    supportItemIcon: true,
                    restoreState: true
                });
                
                options.load();
                
                enableGoogleLayersControl(layers, ge);
                enableGoogleLayersControl(options, ge);
                
            }
            
            function failureCB(errorCode) {
                alert('failed to load plugin');
            }

            $(document).ready(init);
            
        </script>
    </head>
    <body>
        <div id="tree1" style="float:left; width:300px; height: 200px;"></div>
        <div id="tree2" style="float:left; width:300px; height: 200px;"></div>
        <div id="map3d" style="float:left; height: 400px; width: 600px;"></div>
    </body>
</html>